const path = require('path');
const MiniCssExtrctPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require("html-webpack-plugin")
const webpack=require('webpack')

module.exports={
    mode:"production",
    entry: "./src/index.js",
    output:{
        path: path.resolve(__dirname,"dist"),
        filename:"js/hw.js"
    },
    module:{
        rules:[
            {
                test: /\.scss$/,
                use: [MiniCssExtrctPlugin.loader,"css-loader","sass-loader"]
            },{
                test: /\.(jpe?g|png|gif|webp)$/,
                use:[{
                    loader:"url-loader",
                    options:{
                        limit: 8000,
                        name: "images/[name].[ext]",
                        esModule:false
                    }
                }]
            },{
                test:/\.html?$/,
                use:['html-withimg-loader']
            },{
                test:/\.js$/,
                use:[{
                    loader:"babel-loader",
                    options:{
                        presets:["@babel/preset-env"]
                    }
                }]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:"轮播图",
            template:"./src/templates/hw.html",
            filename:'index.html',
            inject: "body",
            minify:false
        }),
        new MiniCssExtrctPlugin({
            filename: "css/hw.css"
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    optimization:{
        // minimize:true
    },
    performance: {
        hints:false
    },
    devServer:{
        host:"127.0.0.1",
        port:8081,
        compress:true,
        static:{
            directory:path.join(__dirname,"dist")
        },
        hot: true,
        open:true
    }
}